<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="renderer" content="webkit">
		<title>热门商品分析</title>
		<script type="text/javascript" src="../resources/js/contants.js"></script>
		<link href="../resources/css/bootstrap.min.css" rel="stylesheet">
		<link href="../resources/css/font-awesome.min.css" rel="stylesheet">
		<link href="../resources/css/style.min.css" rel="stylesheet">
		<link href="../resources/css/dateRange.css" rel="stylesheet">
		<link rel="stylesheet" href="../resources/css/layer.css" id="layui_layer_skinlayercss" style="">
		<link rel="stylesheet" href="../resources/css/layer.ext.css" id="layui_layer_skinlayercss" style="">
		<link rel="stylesheet" href="../resources/css/style.css" id="layui_layer_skinlayercss" style="">
		<script type="text/javascript" src="../resources/js/jquery-2.1.1.min.js"></script>
		<script type="text/javascript" src="../resources/js/dateRange.js"></script>
		<!-- highcharts js -->
		<script type="text/javascript" src="../resources/js/echarts.common.min.js"></script>
		<!-- <script type="text/javascript" src="../resources/js/exporting.js"></script>
    <script type="text/javascript" src="../resources/js/json2.js"></script>
    <script type="text/javascript" src="../resources/js/common.js"></script> -->

		<script type="text/javascript">
			function load() {
				// $.ajax({
				//     url: "https://learn.gotohard.cn/article/findOne.do?id=1", success: function (result) {
				//         console.log('-- ajax result ---', result)
				//         setCharts(result);
				//     }
				// });
				const result = {
					category: ['1-2', '2-3', '3-4', '4-5', '5-6', '6-7', '7-8', '7-8'], // 类目
					click_count: [0.9,0.92,1.1,0.88,1.27,0.81,1.02,0.9], // 点击量
					
				};
				setCharts(result);

				var myChart = echarts.init(document.getElementById('container'));
				const option = setCharts(result);
				console.log(JSON.stringify(option));
				myChart.setOption(option);

				document.querySelector('input[type="submit"]')
			}

			function setCharts(data) {
				option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							crossStyle: {
								color: '#999'
							}
						}
					},
					legend: {
						show: true,
						data: ['转化率']
					},
					xAxis: [{
						type: 'category',
						data: data.category,
						axisPointer: {
							type: 'shadow'
						}
					}],
					yAxis: [{
							type: 'value',
							name: '转化率',
							axisLabel: {
								formatter: '{value} '
							}
						}

					],
					series: [{
							name: '转换率',
							type: 'bar',
							label: {
								normal: {
									show: true,
									position: 'top'
								}
							},
							data: data.click_count
						}
					
					]
				};
				return option;
			}
		</script>
		<title>测试2</title>
	</head>

	<body class="gray-bg" onload="load()">
		<div class="wrapper wrapper-content">
			<!--<div class="row">
				<div class="col-sm-4">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<span class="label label-success pull-right">昨日</span>
							<h5>最高温度</h5>
						</div>
						<div class="ibox-content">
							<h1 class="no-margins">
                            <span id="user_behavior_new_users">11°C</span>
                        </h1>
							<div class="stat-percent font-bold fa-lg">
								<span id="user_behavior_new_user_rate" class="fa text-success fa-level-down">15.4%</span>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-4">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<span class="label label-success pull-right">昨日</span>
							<h5>最低温度</h5>
						</div>
						<div class="ibox-content">
							<h1 class="no-margins">
                            <span id="user_behavior_active_users">9°C</span>
                        </h1>
							<div class="stat-percent font-bold">
								<span id="user_behavior_active_user_rate" class="fa text-danger fa-level-up">12.5%</span>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-4">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<span class="label label-success pull-right">昨日</span>
							<h5>平均温度</h5>
						</div>
						<div class="ibox-content">
							<h1 class="no-margins">
                            <span id="user_behavior_total_users">10°C</span>
                        </h1>
							<div class="stat-percent font-bold text-navy">
								<span id="user_behavior_total_user_rate" class="fa text-success fa-level-down">4.8%</span>
							</div>
						</div>
					</div>
				</div>
			</div>-->
			<div class="row">
				<div id="demo_title" class="col-sm-12 no-margins">
					<div class="row no-paddings no-margins no-border">
						<div class="col-sm-12 no-margins" style="padding:0px; border:0px;">
							<div class="ibox no-margins">
								<div class="ibox-content">
									<span class="no-margins">页面之间转换率</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div id="container" style="height: 500px;width:100%;" class="col-sm-12"></div>
			</div>
		</div>
	</body>

</html>